<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小兔鲜儿</title>
    <link rel="stylesheet" href="">
    <link rel="stylesheet" href="./css/style.css">
    <link rel="stylesheet" href="./font/iconfont.css">
</head>
<body>
    <div class="shortcut">
        <div class="wrapper">
            <ul>
                <li><a href="#">请先登录</a></li>
                <li><a href="#">免费注册</a></li>
                <li><a href="#">我的订单</a></li>
                <li><a href="#">会员中心</a></li>
                <li><a href="#">帮助中心</a></li>
                <li><a href="#">关于我们</a></li>
                <li><a href="#"><span></span>手机版</a></li>
                <span></span>
            </ul>
        </div>
    </div>
    <div class="header wrapper">
        <div class="logo"></div>
        <div class="nav">
            <ul>
                <li> <a href="#">首页</a> </li>
                <li> <a href="#">生鲜</a> </li>
                <li> <a href="#">美食</a> </li>
                <li> <a href="#">餐厨</a> </li>
                <li> <a href="#">电器</a> </li>
                <li> <a href="#">居家</a> </li>
                <li> <a href="#">洗护</a> </li>
                <li> <a href="#">孕婴</a> </li>
                <li> <a href="#">服装</a> </li>
            </ul>
        </div>
        <div class="search">
            <div class="iconfont icon-fangdajing search-icon"></div>
            <input type="text" placeholder="搜一搜 廖艺祺 23215220126">
            <span></span>
            <div class="cart-wrapper">
                <div class="iconfont icon-gouwuche car"></div>
                <span class="cart-badge">嘿</span>
            </div>
        </div>
        
    <!-- banner -->
    <div class="banner">
        <div class="wrapper">
            <ul>
                <li><a href="#"><img src="./image/banner_1.png" alt=""></a></li>
            </ul>
            <!-- 侧导航 -->
            <div class="aside">
                <ul>
                    <li><a href="">生鲜<span> 水果 蔬菜   ></span></a></li>
                    <li><a href="">美食<span> 面点 干果   ></span></a></li>
                    <li><a href="">餐厨<span> 数码产品    ></span></a></li>
                    <li><a href="">电器<span> 床品 四件套 被枕   ></span></a></li>
                    <li><a href="">居家<span> 奶粉 玩具 辅食   ></span></a></li>
                    <li><a href="">洗护 <span> 洗发 洗护 美妆   ></span></a></li>
                    <li><a href="">孕婴<span> 奶粉 玩具   ></span></a></li>
                    <li><a href="">服饰<span> 女装 男装   ></span></a></li>
                    <li><a href="">杂货<span> 户外 图书   ></span></a></li>
                    <li><a href="">品牌<span> 品牌制透   ></span></a></li>
                </ul>
            </div>
                        <!-- 箭头 -->
            <!-- prev上一个 -->
            <a href="#" class="prev"></a>
            <!-- next下一个 -->
            <a href="#" class="next"></a>

            <!-- 园点 ：当前状态：current/active-->
            <!-- js 找到用户点击的li 添加类名 li变白色的 -->
            <ol>
                <li></li>
                <li></li>
                <li class="current"></li>
                <li></li>
                <li></li>
            </ol>
        </div>
    </div>


    <!-- 新鲜好物 -->
    <div class="goods wrapper">
        <!-- hd header  -->
        <div class="hd wrapper">
            <h2>新鲜好物<span>新鲜出炉 品质靠谱</span>
                <a href="#">查看全部</a>
            </h2>
        </div>

        <!-- body -->
        <div class="bd clearfix">
            <ul>
                <li>
                    <a href="#"><img src="./image/new_goods_1.jpg" alt="">
                        <h3>客米无线吸尘器F8</h3>
                        <div>￥<span>899</span></div>
                        <b>新品</b>
                    </a>
                </li>
                <li>
                    <a href="#"><img src="./image/new_goods_2.jpg" alt="">
                        <h3>只能环绕3D空调</h3>
                        <div>￥<span>1299</span></div>
                        <b>新品</b>
                    </a>    
                </li>
                <li>
                    <a href="#"><img src="./image/new_goods_3.jpg" alt="">
                        <h3>广东软软糯米煲仔饭</h3>
                        <div>￥<span>129</span></div>
                        <b>新品</b>
                    </a>
                    
                </li>
                <li>
                    <a href="#"><img src="./image/new_goods_4.jpg" alt="">
                        <h3>罗西机械智能手表</h3>
                        <div>￥<span>3399</span></div>
                        <b>新品</b>
                    </a>
                </li>
            </ul>
        </div>
    </div>

    <!-- 人气推荐 -->
    <div class="recommend wrapper">
        <div class="hd wrapper">
            <h2>人气推荐<span>人气爆款 不容错过</span>
                <a href="#"></a>
            </h2>
        </div>
        <div class="bd clearfix">
            <ul>
                <li>
                    <a href="#">
                        <img src="./image/popular_1.jpg" alt="">
                        <h3>特惠推荐</h3>
                    <div><span>我猜得到你的需要</span></div>
                    <b>人气爆款</b>
                    </a>
                    
                </li>

                <li>
                    <a href="#">
                        <img src="./image/popular_2.jpg" alt="">
                        <h3>爆款推荐</h3>
                        <div><span>人气好物推荐</span></div>
                        <b>人气爆款</b>
                    </a>
                </li>

                <li>
                    <a href="#">
                        <img src="./image/popular_3.jpg" alt="">
                        <h3>场景使用一站买全</h3>
                        <div><span>编辑精心整理</span></div>
                        <b>人气爆款</b>
                </a>
                </li>

                <li>
                    <a href="#">
                        <img src="./image/popular_4.jpg" alt="">
                        <h3>领券中心</h3>
                        <div><span>发现更多超值优惠券</span></div>
                        <b>人气爆款</b>
                </a>
                </li>
            </ul>
        </div>
    </div>

    <!-- 热门品牌 -->
    <div class="hot wrapper">
        <div class="hd wrapper">
            <h2>热门品牌<span>国际经典 品质保证</span></h2>
            <a href="#"></a>
        </div>

        <div class="bd clearfix">
            <ul>
                <li>
                    <a href="#">
                        <img src="./image/brand_goods_1.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a href="#">

                        <img src="./image/brand_goods_2.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a href="#">

                        <img src="./image/brand_goods_3.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./image/brand_goods_4.jpg" alt="">
                    </a>
                </li>

                <li>
                    <a href="#">
                        <img src="./image//brand_goods_5.jpg" alt="">
                    </a>
                </li>

            </ul>
        </div>
    </div>

    <!-- 生鲜 -->
    <div class="shengxian wrapper">
        <div class="hd wrapper">
            <h2>生鲜</h2>
            <a href="#" class="more">查看全部</a>
            <ul>
                <li><a href="#">水果</a></li>
                <li><a href="#">蔬菜</a></li>
                <li><a href="#">肉禽蛋</a></li>
                <li><a href="#">裤装</a></li>
                <li><a href="#">衬衫</a></li>
                <li><a href="#">T恤</a></li>
                <li><a href="#">内衣</a></li>
            </ul>
    </div>
        <div class="bd clearfix">
            <div class="left">
                <a href="#">
                    <img src="./image/fresh_goods_cover.png" alt="">
                </a>
            </div>

            <div class="right">
                <ul>
                    <li><a href="#"><img src="./image/fresh_goods_1.jpg" alt="">
                        <div class="product-info">
                            <p>美威 智利原味三文鱼排</p>
                            <p>240g/袋 4片装</p>
                            <p>海鲜年货</p>
                            <div>￥<span>59</span></div>
                        </div>
                    </a></li>
                    <li><a href="#"><img src="./image/fresh_goods_2.jpg" alt="" style="height: 234.297;">
                        <div class="product-info">
                            <p>红功夫 麻辣小龙虾1.5kg</p>
                            <p>4-6钱/25-32只</p>
                            <p>火锅食材</p>
                            <div>￥<span>79</span></div>
                        </div>
                    </a></li>
                    <li><a href="#"><img src="./image/fresh_goods_3.jpg" alt="">
                        <div class="product-info">
                            <p>三都港 冷冻无公害黄花鱼</p>
                            <p>700g 2条 袋装</p>
                            <p>海鲜水产</p>
                            <div>￥<span>49</span></div>
                        </div>
                    </a></li>
                    <li><a href="#"><img src="./image/fresh_goods_4.jpg" alt="">
                        <div class="product-info">
                            <p>渔公码头 大连鲜食入味</p>
                            <p>即食海参 辽参刺参</p>
                            <p>调味海</p>
                            <div>￥<span>859</span></div>
                        </div>
                    </a></li>
                    <li><a href="#"><img src="./image/fresh_goods_5.jpg" alt="">
                        <div class="product-info">
                            <p>越南白心火龙果4个装 </p>
                            <p>标准果400-550g</p>
                            <p>新鲜水果</p>
                            <div>￥<span>20</span></div>
                        </div>
                    </a></li>
                    <li><a href="#"><img src="./image/fresh_goods_6.jpg" alt="">
                        <div class="product-info">
                            <p>广西沃柑 新鲜水果</p>
                            <p>柑橘1.5kg</p>
                            <p>新鲜水果</p>
                            <div>￥<span>20</span></div>
                        </div>
                    </a></li>
                    <li><a href="#"><img src="./image/fresh_goods_7.jpg" alt="">
                        <div class="product-info">
                            <p>进口 牛油果 6个装</p>
                            <p>单果重约130-180g</p>
                            <p>新鲜水果</p>
                            <div>￥<span>50</span></div>
                        </div>
                    </a></li>
                    <li><a href="#"><img src="./image/fresh_goods_8.jpg" alt="">
                        <div class="product-info">
                            <p>泰国进口山竹5A级</p>
                            <p>240g/袋 4片装</p>
                            <p>海鲜水果</p>
                            <div>￥<span>59</span></div>
                        </div>
                    </a></li>
                </ul>
            </div>
        </div>
    </div>
    <!-- 板底版权 -->
    <div class="service wrapper">
        <div class="customer">
          <h4>客户服务</h4>
          <ul>
            <li>
              <a href="#">
                <i class="iconfont icon-zaixiankefucustomerservice nor"></i>
                <p>在线客服</p>
              </a>
            </li>
            <li>
              <a href="#">
                <i class="iconfont icon-wentifankui nor" ></i>
                <p>问题反馈</p>
              </a>
            </li>
          </ul>
        </div>
  
        <div class="about">
          <h4>关注我们</h4>
          <ul>
            <li>
              <a href="#">
                <i class="iconfont icon-weibo nor"></i>
                <p>公众号</p>
              </a>
            </li>
            <li>
              <a href="#">
                <i class="iconfont icon-gongzhonghao nor"></i>
                <p>微博</p>
              </a>
            </li>
          </ul>
        </div>
  
        <div class="download">
          <h4>下载APP</h4>
          <div class="left">
            <i class="ri-qr-code-line size"><img src="./image/qrcode.png" width="100px" height="100px" alt=""></i>
          </div>
          <div class="right">
            <p>扫描二维码</p>
            <p>立即下载APP</p>
            <a href="#">下载页面</a>
          </div>
        </div>
  
        <div class="phone">
          <h4>服务热线</h4>
          <span>400-0000-000</span>
          <p>周一至周日 8:00-18:00</p>
        </div>
      </div>
    
    <div class="footer">
        <div class="wrapper">
          <div class="top">
            <ul>
              <!-- 通过伪元素添加实现精灵图 -->
              <li>
                <span>价格亲民</span>
              </li>
              <li>
                <span>物流快捷</span>
              </li>
              <li>
                <span>品质新鲜</span>
              </li>
            </ul>
          </div>
          <div class="bottom">
            <p>
              <a href="#">关于我们</a>
              |
              <a href="#">帮助中心</a>
              |
              <a href="#">售后服务</a>
              |
              <a href="#">配送与验收</a>
              |
              <a href="#">商务合作</a>
              |
              <a href="#">搜索推荐</a>
              |
              <a href="#">友情链接</a>
            </p>
            <p>CopyRight @ 小兔鲜儿</p>
          </div>
        </div>
      </div>
    </div>
</body>
</html>